
<template>
  <div>
    <button @click="flag = !flag">点击我切换元素的显示与隐藏</button>
    <!--transition:vue框架提供的一个全局组件,可以在任意组件模板当中都可以直接使用-->
    <transition name="one">
        <!--当元素进入、离开的 vue框架会给div标签添加一些类名-->
        <div class="box" v-show="flag"></div>
    </transition>

    <transition name="two">
        <!--当元素进入、离开的 vue框架会给div标签添加一些类名-->
        <div class="box" v-show="flag"></div>
    </transition>
  </div>
</template>

<script>
/*
  参与过渡动画的元素|组件:务必使用v-if|v-show指令，让元素拥有显示与隐藏功能！！
  隐藏->显示:进入阶段   进入开始阶段            进入结束阶段
  显示->离开:离开阶段 

  进入阶段: v-enter 进入阶段开始类名         v-enter-active [定义过渡动画时间、速率]                v-enter-to 进入阶段结束类名


  离开阶段 v-leave 离开阶段开始类名          v-leave-active                                                       v-leave-to 离开阶段结束类名

     
*/
export default {
  name: "",
  data() {
    return {
      flag: false,
    };
  },
};
</script>

<style scoped>
.box {
  width: 600px;
  height: 300px;
  background: yellowgreen;
}

 /* 进入阶段:开始阶段       进来的时候旋转度数零度*/
 .one-enter{
    transform: rotate(0deg);
    width: 0px;
    height: 0px;
 }

 /*进入阶段:经常用来定义过渡动画时间、速率、延迟事件等等*/
 .one-enter-active{
    transition:all 1s linear 0s;
 }
  /* 进入阶段:结束阶段      进来的时候最终旋转度数360度*/
 .one-enter-to{
     transform: rotate(360deg);
     width: 600px;
     height: 300px;
 }


 /**离开阶段**/
 .one-leave{
   width: 600px;
   height:300px;
   opacity: 1;
   transform: rotate(0deg);
 }

.one-leave-active{
  transition:all .5s linear 0s;
}

 .one-leave-to{
   width: 0px;
   height:0px;
   opacity: 0;
   transform: rotate(360deg);
 }



 .two-enter{
   opacity: 0;
   width: 0px;
 }

.two-enter-active{
   transition:all 10s ;
}

 .two-enter-to{
   opacity: 1;
   width: 300px;
 }
</style>




